<style lang="scss" scoped>
.content{
     padding-top:60px;
     position: fixed;
     width: 100%;
     height:100%;
     background: #fff;
    .section{
        max-width: 1366px;
        margin: 0 auto;
        font-size: 12px;
        height:100%;
        .left{
            float: left;
            width:100%;
            height:calc(100% - 130px);
            padding-left: 20px;
            .tabs{
                overflow: hidden;
                width: 100%;
                margin-top:20px;
                .t1,.t2{
                    width: 23%;
                    float: left;
                    padding: 0 10px;
                    border:1px solid #E8E8E8;
                    height: 100px;
                    border-radius: 4px;
                    line-height: 100px;
                    font-size: 16px;
                    text-align: center;
                    color: #222222;
                    margin-right: 2%;
                    cursor: pointer;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    img{
                        width: 40px;
                        vertical-align: middle;
                        margin-right:10px;
                    }
                    &:hover{
                        background: #F9FBFF;
                        border:1px solid #448EF7;
                    }
                }
                .t3{
                  img{
                    width: 30px;
                  }
                }
                .avtive{
                    background: #F9FBFF;
                    border:1px solid #448EF7;
                }
            }
            .need,.calendar{
                clear: both;
                border-radius: 2px;
                border:1px solid #E8E8E8;
                margin-top:20px;
                padding: 20px;
                height:calc(100% - 200px);
                max-height:400px;
                width:56%;
                float: left;
                margin-right: 2%;
                .title{
                    overflow: hidden;
                    .t,.airing{
                        float: left;
                    }
                    .airing{
                        .font-icon{
                        background: url('../../assets/img/xiaoxi.png') no-repeat;
                        background-size:12px;
                        display: inline-block;
                        vertical-align:sub;
                        width: 12px;
                        height: 12px;
                        }
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        height: 20px;
                        background: #FAFAFA;
                        border: 1px solid #E8E8E8;
                        max-width: 56%;
                        line-height: 20px;
                        margin-left: 10px;
                        padding: 0 10px;
                        color: #212122;
                        font-size: 12px;
                        span{
                        color: #448EF7;
                        }
                    }
                    .btn{
                        font-size: 14px;
                        border-radius: 20px;
                        padding: 0 20px;
                        float: right;
                    }
                }
                .lists{
                    margin: 10px 0px;
                    height:calc(100% - 45px);
                    overflow: auto;
                    .list{
                        overflow: hidden;
                        height:46px;
                        line-height: 46px;
                        .btn{
                        border-radius: 10px;
                        padding: 0 10px;
                        font-size: 12px;
                        float: left;
                        position: relative;
                        top:12px;
                        }
                        .lv{
                        background: #38CBB7;
                        }
                        .text{
                            padding-left: 4px;
                            color: #666665;
                            max-width: 65%;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            float: left;
                        }
                        .looks{
                        float: right;
                        .btn{
                            float: left;
                            position: relative;
                            top:12px;
                            cursor: pointer;
                            height:20px;
                            line-height: 20px;
                        }
                        .btn1{
                            background: #EFF6FF;
                            border: 1px solid #458EF6;
                            border-radius: 18px;
                            color: #458EF6;
                            margin-right: 10px;
                        }
                        .btn2{
                            background: #FFFFFF;
                            border: 1px solid #DADADA;
                            border-radius: 18px;
                            color: #B9B9B9;
                        }
                        }
                    }
                    }
            }
            .calendar{
              clear: inherit;
              border-radius: 2px;
              border:1px solid #E8E8E8;
              margin-top:20px;
              padding: 20px;
              height:calc(100% - 200px);
              width: 40%;
              margin-right: 0%;
              float: left;
              .calendartemplate{
                overflow: auto;
                margin: 10px 0px;
                height: calc(100% - 20px);
              }
              .calendarBox{
                margin-top: 10px;
                overflow: hidden;
                li{
                  width: 25%;
                  float: left;
                  text-align: center;
                  span{
                    width: 65px;
                    height: 65px;
                    display: inline-block;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 65px;
                    cursor: pointer;
                    font-size: 16px;
                    color: #666666;
                  }
                  span:nth-child(4){
                    margin-right: 0%;
                  }
                  span:hover{
                    background: #458EF6;
                    color: #fff;
                  }
                  .activeCalen{
                    background: #458EF6;
                    color: #fff;
                  }
                }
              }
            }
        }
        .right{
            width: 290px;
            margin:20px 20px 0 0px;
            border:1px solid #E8E8E8;
            height:calc(100% - 210px);
            float: right;
            border-radius: 4px;
            padding: 20px;
            .select{
                padding-top:10px;
            }
            .lists{
                margin-top:20px;
                border-top:1px solid #E9E9E9;
                height:calc(100% - 70px);
                overflow: auto;
                .list{
                    padding-top:10px;
                    overflow: hidden;
                    .img{
                        float: left;
                        width: 50px;
                        img{
                            width: 100%;
                        }
                    }
                    .info{
                        float: left;
                        padding-top:6px;
                        padding-left:10px;
                        .name{
                            font-weight: 600;
                            font-size: 14px;
                        }
                        .title{
                            font-size: 12px;
                            padding-top:6px;
                        }
                    }
                }
            }
        }
    }
}
::v-deep{
    .el-input-group__append{
        background: #448ef7;
        color: #fff;
        border:1px solid #448ef7;
    }
}
.calendar{
              clear: inherit;
              border-radius: 2px;
              border:1px solid #E8E8E8;
              // margin-top:20px;
              padding: 20px;
              height:calc(100% - 200px);
              width: 100%;
              .calendartemplate{
                overflow: auto;
                margin: 10px 0px;
                height: calc(100% - 20px);
              }
              .calendarBox{
                margin-top: 10px;
                overflow: hidden;
                li{
                  width: 25%;
                  float: left;
                  text-align: center;
                  span{
                    width: 65px;
                    height: 65px;
                    display: inline-block;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 65px;
                    cursor: pointer;
                    font-size: 16px;
                    color: #666666;
                  }
                  span:nth-child(4){
                    margin-right: 0%;
                  }
                  span:hover{
                    background: #458EF6;
                    color: #fff;
                  }
                  .activeCalen{
                    background: #458EF6;
                    color: #fff;
                  }
                }
              }
            }
</style>
<template>
  <div class="content">
    <bxHeader @date="date" />
    <bxTitle />
    <!-- <bxTab /> -->
    <div class="section">

      <div class="left">
        <div class="tabs">
          <div v-for="(item,index) in navBarList" :key="index" class="t1" :class="[item.menuEname === 'MT13000' ? 't3' :'']" @click="getTapFallIn(item)">
            <img :src="item.imgTab">
            {{ item.menuCname }}
          </div>
          <!-- <div class="t2">
            <img src="../../assets/img/view.png">
            查看/打印我的”一人一表“
          </div>
          <div class="t2 t3">
            <img src="../../assets/img/tracking.png">
            跟踪/反馈我的”一人一表“
          </div>
          <div class="t2 t4">
            <img src="../../assets/img/evaluation.png">
            ”一人一表“总结/评价
          </div> -->
        </div>

        <div class="need">
          <div class="title">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="我的待办" name="todoList" />
              <el-tab-pane label="我的已办" name="haveToDoList" />
            </el-tabs>
            <!-- <p class="h2 t">我的待办</p> -->
            <!-- <p class="airing">
              <i class="font-icon" />
              全部待办36条，已处理10条，未处理
              <span>26</span>
              条
            </p>
            <p class="m_primary btn">全部已阅</p> -->
          </div>
          <div class="lists">
            <ul v-loading="loading">
              <li v-for="(item,index) in todoList" :key="index" class="list">
                <p v-if="item.myself==='1'" class="btn m_primary">我的</p>
                <p v-if="item.myself==='0'" class="btn m_primary lv">下属</p>
                <p v-show="item.createTime" class="text">【{{ item.createTime }}】{{ item.message }}</p>
                <p v-show="!item.createTime" class="text">{{ item.message }}</p>
                <div class="looks">
                  <p v-if="show(item,['-3','-2'])" class="btn btn1" @click="goFallIn(item)">前往填写</p>
                  <p v-if="show(item,['1','2','3','4','5','6','7','8']) && activeName === 'todoList'" class="btn btn1" @click="goFallIn(item)">查看</p>
                  <p v-if="show(item,['1','2','3','4','5','6','7','8']) && activeName === 'haveToDoList'" class="btn btn1" @click="goHaveToDo(item)">查看</p>
                  <p v-if="show(item,['2','5'])" class="btn btn2">已阅</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="calendar">
          <div class="title">
            <p class="h2 t">跟踪</p>
          </div>
          <div class="calendartemplate">
            <ul v-for="(item,index) in mounthArr" :key="index" class="calendarBox">
              <li>
                <span @click="mounthClick(item.quarterId,'quarterNumber')">{{ item.quarter }}</span>
              </li>
              <li> <span @click="mounthClick(item.mountha.id,'monthNumber')">{{ item.mountha.value }}</span></li>
              <li> <span @click="mounthClick(item.mounthb.id,'monthNumber')">{{ item.mounthb.value }}</span></li>
              <li> <span @click="mounthClick(item.mounthc.id,'monthNumber')">{{ item.mounthc.value }}</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <bxFooter />
    <el-dialog
      class="myimport"
      width="55%"
      append-to-body
      style="font-size: 12px !important"
      top="15vh"
      title="跟踪"
      :visible.sync="dialogRecord"
    >
      <div class="calendar">
        <div class="title">
          <p class="h2 t">{{ year }}</p>
        </div>
        <div class="calendartemplate">
          <ul v-for="(item,index) in mounthArr" :key="index" class="calendarBox">
            <li>
              <span @click="mounthClick(item.quarterId,'quarterNumber')">{{ item.quarter }}</span>
            </li>
            <li> <span @click="mounthClick(item.mountha.id,'monthNumber')">{{ item.mountha.value }}</span></li>
            <li> <span @click="mounthClick(item.mounthb.id,'monthNumber')">{{ item.mounthb.value }}</span></li>
            <li> <span @click="mounthClick(item.mounthc.id,'monthNumber')">{{ item.mounthc.value }}</span></li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bxHeader from '@/components/headerFooter/header'
// import bxTab from '@/components/tab/index'
import bxTitle from '@/components/tab/title'
import bxFooter from '@/components/headerFooter/footer'
// import { getTab, setTab} from '@/utils/tabJup'
export default {
  components: {
    bxFooter,
    bxHeader,
    // bxTab,
    bxTitle
  },
  data() {
    return {
      // value: '管理我的一人一表',
      todoList: [],
      menuEname: '',
      navBarList: [],
      year: '',
      loading: false,
      activeName: 'todoList',
      dialogRecord: false,
      mounthArr: [
        { quarter: '一季度', quarterId: '1', mountha: { value: '一月', id: '1' }, mounthb: { value: '二月', id: '1' }, mounthc: { value: '三月', id: '1' }},
        { quarter: '二季度', quarterId: '2', mountha: { value: '四月', id: '2' }, mounthb: { value: '五月', id: '2' }, mounthc: { value: '六月', id: '2' }},
        { quarter: '三季度', quarterId: '3', mountha: { value: '七月', id: '3' }, mounthb: { value: '八月', id: '3' }, mounthc: { value: '九月', id: '3' }},
        { quarter: '四季度', quarterId: '4', mountha: { value: '十月', id: '4' }, mounthb: { value: '十一月', id: '4' }, mounthc: { value: '十二月', id: '4' }}
      ]
    }
  },
  mounted() {
    if (this.$route.query.menuEname) {
      this.menuEname = this.$route.query.menuEname
    }
    // this.init()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === 'todoList') {
        this.todo()
      }
      if (tab.name === 'haveToDoList') {
        this.haveToDo()
      }
    },
    // 年份
    date(val) {
      // console.log(val, '4567890')
      this.year = val
      if (this.$route.query.menuEname) {
        this.menuEname = this.$route.query.menuEname
      }
      this.init(this.year)
    },
    show(item, arr) {
      // console.log(arr.indexOf(item.taskType) !== -1)
      return arr.indexOf(item.taskType) !== -1
    },
    init(val) {
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01001',
        'methodName': 'getNavForParent',
        'parentNav': 'MT10000'
      }).then((res) => {
        console.log(res)
        if (res.isSuccess) {
          this.navBarList = res.data.navBarList
          this.navBarList.map(val => {
            if (val.menuEname === 'MT11000') {
              val.imgTab = require('../../assets/img/maintenance.png')
            } else if (val.menuEname === 'MT12000') {
              val.imgTab = require('../../assets/img/view.png')
            } else if (val.menuEname === 'MT13000') {
              val.imgTab = require('../../assets/img/tracking.png')
            } else if (val.menuEname === 'MT14000') {
              val.imgTab = require('../../assets/img/evaluation.png')
            }
          })
        }
      })
      this.todo(val)
    },
    todo(val) {
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01108',
        'methodName': 'getPendingTask',
        'reportYear': val || this.year
      }).then((res) => {
        console.log(res)
        if (res.isSuccess === true) {
          this.todoList = res.data
          this.loading = false
        }
      })
    },
    haveToDo(val) { // 初始化已办list
      this.loading = true
      this.$http.post('/serviceAction/common', {
        'methodName': 'getReadApproveTask',
        'serviceName': 'MT01108',
        'reportYear': val || this.year
      }).then((res) => {
        if (res.isSuccess) {
          this.todoList = res.data
          this.loading = false
        }
      })
    },
    see() {
      this.$router.push({
        path: '/checkSubordinatesview'
      })
    },
    getTapFallIn(item) {
      // setTab(item.menuCname)
      this.$store.commit('tab/UPDATE_TABARR', [item])
      if (item.menuEname === 'MT14000') {
        this.$message({
          type: 'info',
          message: '当前功能暂未开放'
        })
        return
      }
      if (item.menuEname === 'MT12000') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'getReportHistoryId',
          'reportYear': this.year,
          'serviceName': 'MT01101'
        }).then((res) => {
          console.log(res)
          if (res.data.reportId !== null) {
            this.$router.push({
              path: '/viewIndex'
            })
          } else {
            this.$message({
              type: 'info',
              message: '您还没有编制"一人一表"，请先进行编制！'
            })
          }
        })
      } else if (item.menuEname === 'MT13000') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'getReportId',
          'reportYear': this.year,
          'serviceName': 'MT01102'
        }).then((res) => {
          console.log(res)
          if (res.data.reportId !== null) {
            this.dialogRecord = true
            // this.$router.push({
            //   path: '/quarterIndex',
            //   query: {
            //     reportHistoryId: res.data.reportId + ''
            //   }
            // })
          } else {
            this.$message({
              type: 'info',
              message: '您还未有编制通过的"一人一表"，请先进行编制并提交审核！'
            })
          }
        })
      }
      if (item.menuEname === 'MT11000') {
        this.$http.post('/serviceAction/common', {
          'methodName': 'isSubmit',
          'reportYear': this.year,
          'serviceName': 'MT01101'
        }).then((res) => {
          if (res.isSuccess) {
            if (res.data === '1') {
              this.$router.push({
                path: '/mainTask',
                query: {
                  edit: '1'
                }
              })
            } else {
              this.$router.push({
                path: '/viewIndex',
                query: {
                  showBtn: '1'
                }
              })
            }
          }
        })
      }
    },
    // 前往填写
    goFallIn(item) {
      if (['2', '3', '5', '6'].includes(item.taskType)) {
        this.$router.push({
          path: '/subordinates', // 领导审核之后的页面
          query: {
            opinion: '1',
            reportHistoryId: item.reportHistoryId
          }
        })
        return
      }
      if (['-2'].includes(item.taskType)) {
        this.$router.push({
          path: '/mainTask', // 编制页面
          query: {
            edit: '1'
          }
        })
        return
      }
    },
    goHaveToDo(item) { // 已办查看按钮
      if (['1', '2', '3', '4', '5', '6'].includes(item.taskType)) {
        this.$router.push({
          path: '/subordinates', // 领导审核之后的页面
          query: {
            reportHistoryId: item.reportHistoryId,
            opinion: '1'
          }
        })
        return
      }
      if (['7', '8'].includes(item.taskType)) {
        this.$router.push({
          path: '/auditSeeQuarter', // 领导点评之后的页面
          query: {
            reportId: item.reportId,
            quarterNumber: item.quarterNumber,
            option: '1'
          }
        })
        return
      }
    },
    // 点击月份
    mounthClick(id, val) {
      console.log(id, val)
      const quarterNumber = id
      this.$http.post('/serviceAction/common', {
        'serviceName': 'MT01103',
        'methodName': 'canWriteQuarter',
        'reportYear': this.year,
        'quarterNumber': quarterNumber
      }).then((res) => {
        if (res.isSuccess) {
          console.log(res)
          if (res.data.redirectType === 1) {
            this.$router.push({
              path: '/quarterIndex',
              query: {
                reportId: res.data.reportId,
                quarterNumber: res.data.quarterNumber
              }
            })
          } else if (res.data.redirectType === 2) {
            this.$router.push({
              path: '/seeQuarterIndex',
              query: {
                reportId: res.data.reportId,
                quarterNumber: res.data.quarterNumber,
                option: '1'
              }
            })
          } else if (res.data.redirectType === 3) {
            this.$router.push({
              path: '/auditSeeQuarter',
              query: {
                reportId: res.data.reportId,
                quarterNumber: res.data.quarterNumber,
                option: '1'
              }
            })
          }
        } else {
          this.$message({
            type: 'info',
            message: res.message
          })
        }
      })
    }
  }
}
</script>
